body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}
.chat-container {
    max-width: 1200px;
    margin: 50px auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.chat-header {
    background: #007bff;
    color: white;
    padding: 15px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    text-align: center;
}
.chat-messages {
    padding: 15px;
    height: 600px;
    overflow-y: auto;
    border-bottom: 1px solid #ddd;
}
.message {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    max-width: 75%;
    clear: both;
}
.message.sent {
    background: #007bff;
    color: white;
    margin-left: auto;
}
.message.received {
    background: #e0e0e0;
    color: black;
    margin-right: auto;
}
.chat-input {
    display: flex;
    padding: 10px;
}
.chat-input input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 10px;
}
.chat-input button {
    padding: 10px 15px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.notification {
    position: fixed; /* 固定位置 */
    top: 20px; /* 距离顶部20px */
    right: 20px; /* 距离右侧20px */
    background-color: #28a745; /* 绿色背景 */
    color: white; /* 白色文字 */
    padding: 15px; /* 内边距15px */
    border-radius: 5px; /* 圆角边框 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
    transition: opacity 0.5s; /* 透明度变化 */
    opacity: 1; /* 初始透明度 */
}
.header-button{
    background: #bcd2eb;
    color: white;
    padding: 5px;
    text-align: center;
    border-top: 2px solid #f6f6b8; /* 添加2px的白色上边框 */
}
.header-button button {
    margin: 0 5px; /* 按钮间距 */
    background: white;
    color: #007bff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}
.notification.hide {
    opacity: 0; /* 隐藏时透明度为0 */
}
.alert {
    position: fixed; /* 固定位置 */
    top: 20px; /* 距离顶部20px */
    right: 20px; /* 距离右侧20px */
    background-color: #dc3545; /* 红色背景 */
    color: white; /* 白色文字 */
    padding: 15px; /* 内边距15px */
    border-radius: 5px; /* 圆角边框 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
    transition: opacity 0.5s; /* 透明度变化 */
    opacity: 1; /* 初始透明度 */
}

.alert.hide {
    opacity: 0; /* 隐藏时透明度为0 */
}